<template>
	<view class="userBank">
			
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#000" size="16"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">结算银行卡</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right"></view>
			</view>
		</u-navbar>

		<view class="bankBox">
			<view class="bankList" v-for="(item,i) in bankList" :key="i" @longtap="longtap(item)">
				<view class="title">
					<view class="info">
						<text>{{item.iconName}}</text>
						<view class="name">
							<view>{{item.cardBank}}</view>
							<text>储蓄卡</text>
						</view>
						
					</view>
					<u-icon name="trash" @tap="longtap(item)" color="#dfdfdf" size="48upx"></u-icon>
				</view>
				<view class="bankNum">
					{{item.cardNumber}}
				</view>
				<image src="@/static/user/bankcar.png" mode="widthFix" class="bank-img"></image>
				<!-- <image src="@/static/user/del.png" mode="widthFix" @tap="delBank(item)" class="del-img"></image> -->
			</view>

			<view class="addBank" @tap="addBank(0)" v-if="bankList.length == 0">
				<image src="../../static/user/addbank.png" mode="widthFix" class="del-icon"></image>
				<text>添加借记卡</text>
			</view>
		</view>
		<!--支付宝-->
		<view class="bankBox2">
			<view class="bankList2" v-for="(item,i) in zhifubaoList" :key="i" @longtap="longtap(item)">
				<view class="title">
					<view class="info">
						<text>{{item.iconName}}</text>
						<view class="name">
							<view>{{item.cardBank}}</view>
							<text>支付宝</text>
						</view>
						
					</view>
					<u-icon name="trash" @tap="longtap2(item)" color="#dfdfdf" size="48upx"></u-icon>
				</view>
				<view class="bankNum">
					{{item.aliPayAccount}}
				</view>
				<image src="@/static/user/bankcar.png" mode="widthFix" class="bank-img"></image>
				<!-- <image src="@/static/user/del.png" mode="widthFix" @tap="delBank(item)" class="del-img"></image> -->
			</view>
		
			<view class="addBank" @tap="addBank(1)" v-if="zhifubaoList.length == 0">
				<image src="../../static/user/addbank.png" mode="widthFix" class="del-icon"></image>
				<text>添加支付宝</text>
			</view>
		</view>
		
		<u-popup :show="openAccountShow" mode="center" @close="closePay">
			<view class="openAccountBox">
				<view class="title">未完成实名认证</view>
				<view class="bottom_btn">
					<view class="btn_item line" @tap="closePay">取消</view>
					<view class="btn_item" @tap="goAccount">去认证</view>
				</view>
			</view>
		</u-popup>
		<mix-loading ref="min_loading"></mix-loading>
		<u-modal :show="isShowModal" title="解绑银行卡" :showCancelButton="true" @confirm="confirmFn" @cancel="cancelFn">
			<view>
				<view>{{currentCard.cardNumber}}</view>
			</view>
		</u-modal>
		<u-modal :show="isShowModal2" title="解绑支付宝账号" :showCancelButton="true" @confirm="confirmFn2" @cancel="cancelFn2">
			<view>
				<view>{{currentCard.aliPayAccount}}</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import {
		appcustomerbankcardList,
		removeUserBank,
		unbindingCard,
		appuserzhifubaoList,
		unbindingZhifubao
	} from '../../api/user.js'
	import {
		getUser
	} from '@/api/login.js'

	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				bankList: [],
				zhifubaoList: [],
				userDetails: {},
				openAccountShow: false,
				isShowModal: false,
				isShowModal2: false,
				currentCard:{
					cardNumber:'',
					protocolNo:'',
					aliPayAccount: ''
				},
				options1: [{
				                    text: '删除'
				                }]
			}
		},
		async onShow() {
			let res = await getUser()
			if (res.status == 200) {
				this.userDetails = res.data.user
				if (res.data.user.isRealName == 1) {
					this.getBankData();
				} else {
					this.openAccountShow = true;
				}
			}
		},
		methods: {
			confirmFn() {
				let param = {
					customerId:this.currentCard.customerId,
					protocolNo:this.currentCard.protocolNo
				}
				unbindingCard(param).then(res=>{
					if(res.data.success) {
						uni.$u.toast('解绑银行卡成功！');
					} else {
						uni.$u.toast(res.data.msg);
					}
					this.getBankData()
				})
				this.isShowModal = false;
			},
			confirmFn2() {
				let param = {
					customerId:this.currentCard.customerId
				}
				unbindingZhifubao(param).then(res=>{
					if(res.data.success) {
						uni.$u.toast('解绑支付宝成功！');
					} else {
						uni.$u.toast(res.data.msg);
					}
					this.getBankData()
				})
				this.isShowModal2 = false;
			},
			cancelFn() {
				this.isShowModal = false;
			},
			cancelFn2() {
				this.isShowModal2 = false;
			},
			longtap(item) {
				console.log("长按 " + JSON.stringify(item))
				this.isShowModal = true;
				this.currentCard = item
			},
			longtap2(item) {
				console.log("长按 " + JSON.stringify(item))
				this.isShowModal2 = true;
				this.currentCard = item
			},
			delBank(cur) { //删除银行卡
				removeUserBank({
					id: cur.id
				}).then(res => {
					if (res.data.success) {
						uni.$u.toast('删除成功！');
					}
				}).catch(err => {
					console.log(err)
				}).finally(() => {
					this.$refs.min_loading.close();
				});
			},
			closePay() {
				this.openAccountShow = false;
			},
			goAccount() {
				uni.navigateTo({
					url: '/pages/openAccount/index'
				})
			},
			addBank(type) {
				if (this.userDetails.isRealName == 0) {
					this.openAccountShow = true
				} else {
					uni.navigateTo({
						url: "/pages/setting/bindingCard?type="+type
					});
				}

			},
			getBankData() {
				this.$nextTick(() => {
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				appcustomerbankcardList({
					page: 1,
					pageSize: 10
				}).then(res => {
					if (res.data.rows) {
						this.bankList = res.data.rows.filter(im => {
							let len = im.cardNumber.length;
							// im["iconName"] = (im.bankName.substring(0, 1));
							im["cardNumber"] = ("···· ···· ···· ···· " + im.cardNumber.substring((len - 4),
								len));
							return im;
						});
						// console.log(this.bankList, '000')
					}
				}).finally(() => {
					this.$refs.min_loading.close();
				});
				appuserzhifubaoList({
					page: 1,
					pageSize: 10
				}).then(res=>{
					if (res.data.rows) {
						this.zhifubaoList = res.data.rows;
					}
				}).finally(() => {
					this.$refs.min_loading.close();
				});
				
			},
			back() {
				let canNavBack = getCurrentPages();
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack({
						delta: 1
					});
				} else {
					history.back();
				}
			},
		},
		computed: {
			...mapState(["hasLogin", "uerInfo"]),
		},
	}
</script>

<style lang="scss" scoped>
	 .u-page {
        padding: 0;
    }

    .u-demo-block__title {
        padding: 10px 0 2px 15px;
    }

    .swipe-action {
        &__content {
             padding: 25rpx 0;
    
            &__text {
                 font-size: 15px;
                 color: $u-main-color;
                 padding-left: 30rpx;
             }
        }
    }
	.userBank {
		min-height: 100vh;
		padding: 150upx 0upx 0;
		background-color: #fff;

		.bankBox {
			padding: 0 40upx;

			.addBank {
				display: flex;
				align-items: center;
				color: #fff;
				height: 112upx;
				background: linear-gradient(-64deg, #2c88d4, #2d62d0);
				border-radius: 20upx;
				padding: 0 30upx;

				.del-icon {
					width: 32upx;
				}

				text {
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin-left: 20upx;

				}
			}

			.bankList {
				background: linear-gradient(95deg, #2c88d4, #2d62d0);
				border-radius: 10upx;
				height: 280upx;
				padding: 0 30upx;
				padding-top: 20upx;
				margin-bottom: 20upx;
				position: relative;

				.bank-img {
					width: 294upx;
					position: absolute;
					top: 126upx;
					right: 48upx;
				}

				.del-img {
					width: 32upx;
					position: absolute;
					top: 60upx;
					right: 30upx;
				}

				.bankNum {
					text-align: center;
					color: #fff;
					font-size: 48upx;
					line-height: 48upx;
					padding-top: 110upx;
				}

				.title {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;

					.info {
						display: flex;
						align-items: flex-start;
						justify-content: space-between;

						>text {
							width: 68upx;
							height: 68upx;
							border-radius: 50%;
							text-align: center;
							background-color: rgba($color: #fff, $alpha: 0.5);
							font-size: 36upx;
							line-height: 68upx;
							font-weight: bold;
							color: #004F9C;
							display: inline-block;
							margin-right: 22upx;
						}

						.name {
							view {
								color: #fff;
								font-size: 32upx;
								line-height: 32upx;
								margin-bottom: 16upx;
							}

							text {
								color: rgba($color: #fff, $alpha: 0.5);
								font-size: 26upx;
								line-height: 26upx;
								display: inline-block;
							}
						}

						image {
							width: 68upx;
							margin-right: 22upx;
						}
					}
				}
			}
			.bankList2 {
				background: linear-gradient(95deg, #cea539, #cea539);
				border-radius: 10upx;
				height: 280upx;
				padding: 0 30upx;
				padding-top: 20upx;
				margin-bottom: 20upx;
				position: relative;
			
				.bank-img {
					width: 294upx;
					position: absolute;
					top: 126upx;
					right: 48upx;
				}
			
				.del-img {
					width: 32upx;
					position: absolute;
					top: 60upx;
					right: 30upx;
				}
			
				.bankNum {
					text-align: center;
					color: #fff;
					font-size: 48upx;
					line-height: 48upx;
					padding-top: 110upx;
				}
			
				.title {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
			
					.info {
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
			
						>text {
							width: 68upx;
							height: 68upx;
							border-radius: 50%;
							text-align: center;
							background-color: rgba($color: #fff, $alpha: 0.5);
							font-size: 36upx;
							line-height: 68upx;
							font-weight: bold;
							color: #004F9C;
							display: inline-block;
							margin-right: 22upx;
						}
			
						.name {
							view {
								color: #fff;
								font-size: 32upx;
								line-height: 32upx;
								margin-bottom: 16upx;
							}
			
							text {
								color: rgba($color: #fff, $alpha: 0.5);
								font-size: 26upx;
								line-height: 26upx;
								display: inline-block;
							}
						}
			
						image {
							width: 68upx;
							margin-right: 22upx;
						}
					}
				}
			}
		}
.bankBox2 {
			margin-top: 20upx;
			padding: 0 40upx;

			.addBank {
				display: flex;
				align-items: center;
				color: #fff;
				height: 112upx;
				background: linear-gradient(-64deg, #cea539, #cea539);
				border-radius: 20upx;
				padding: 0 30upx;

				.del-icon {
					width: 32upx;
				}

				text {
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					margin-left: 20upx;

				}
			}

			.bankList {
				background: linear-gradient(95deg, #2c88d4, #2d62d0);
				border-radius: 10upx;
				height: 280upx;
				padding: 0 30upx;
				padding-top: 20upx;
				margin-bottom: 20upx;
				position: relative;

				.bank-img {
					width: 294upx;
					position: absolute;
					top: 126upx;
					right: 48upx;
				}

				.del-img {
					width: 32upx;
					position: absolute;
					top: 60upx;
					right: 30upx;
				}

				.bankNum {
					text-align: center;
					color: #fff;
					font-size: 48upx;
					line-height: 48upx;
					padding-top: 110upx;
				}

				.title {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;

					.info {
						display: flex;
						align-items: flex-start;
						justify-content: space-between;

						>text {
							width: 68upx;
							height: 68upx;
							border-radius: 50%;
							text-align: center;
							background-color: rgba($color: #fff, $alpha: 0.5);
							font-size: 36upx;
							line-height: 68upx;
							font-weight: bold;
							color: #004F9C;
							display: inline-block;
							margin-right: 22upx;
						}

						.name {
							view {
								color: #fff;
								font-size: 32upx;
								line-height: 32upx;
								margin-bottom: 16upx;
							}

							text {
								color: rgba($color: #fff, $alpha: 0.5);
								font-size: 26upx;
								line-height: 26upx;
								display: inline-block;
							}
						}

						image {
							width: 68upx;
							margin-right: 22upx;
						}
					}
				}
			}
			.bankList2 {
				background: linear-gradient(95deg, #cea539, #cea539);
				border-radius: 10upx;
				height: 280upx;
				padding: 0 30upx;
				padding-top: 20upx;
				margin-bottom: 20upx;
				position: relative;
			
				.bank-img {
					width: 294upx;
					position: absolute;
					top: 126upx;
					right: 48upx;
				}
			
				.del-img {
					width: 32upx;
					position: absolute;
					top: 60upx;
					right: 30upx;
				}
			
				.bankNum {
					text-align: center;
					color: #fff;
					font-size: 48upx;
					line-height: 48upx;
					padding-top: 110upx;
				}
			
				.title {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
			
					.info {
						display: flex;
						align-items: flex-start;
						justify-content: space-between;
			
						>text {
							width: 68upx;
							height: 68upx;
							border-radius: 50%;
							text-align: center;
							background-color: rgba($color: #fff, $alpha: 0.5);
							font-size: 36upx;
							line-height: 68upx;
							font-weight: bold;
							color: #004F9C;
							display: inline-block;
							margin-right: 22upx;
						}
			
						.name {
							view {
								color: #fff;
								font-size: 32upx;
								line-height: 32upx;
								margin-bottom: 16upx;
							}
			
							text {
								color: rgba($color: #fff, $alpha: 0.5);
								font-size: 26upx;
								line-height: 26upx;
								display: inline-block;
							}
						}
			
						image {
							width: 68upx;
							margin-right: 22upx;
						}
					}
				}
			}
		}
		.logoBox {
			width: 100%;
			height: 100%;

			.navBox {
				height: 120upx;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #000;
				box-shadow: 0px 0px 1px 0px rgba(51, 51, 51, 0.5000);
			}
		}

		/deep/.u-popup__content {
			width: 633upx;
			height: auto;
			background: #fff;
			border-radius: 20upx;
			overflow: hidden;

			.header {
				height: 48upx;
				// background: url('../../static/user/border.png');
				// background-size: 100% 100%;
				text-align: center;
				font-size: 32upx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #FFFFFF;
				margin: 34upx 38upx 0 38upx;
			}

		}

		/deep/.u-button--info {
			border-color: transparent;
		}

		.openAccountBox {
			background: #FFFFFF;
			text-align: center;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			padding-top: 50upx;

			.title {
				padding-bottom: 50upx;
			}

			.bottom_btn {
				width: 100%;
				font-size: 14px;
				font-family: PingFang SC;
				font-weight: 500;
				color: #C09B3A;
				display: flex;
				align-items: center;
				justify-content: center;

				box-shadow: 0px 0px 1px 0px #BCBCBC;

				.btn_item {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 88upx;
				}

				.line {
					box-shadow: 1upx 0px 0px 0px #BCBCBC;
				}
			}
		}
	}
	
	
</style>
